<script setup>
import { reactive, ref, onMounted } from "vue";
import { useOrganizationStore } from "@/stores";

const organizationStore = useOrganizationStore();

const store = reactive({
  organizationStore: {
    rateDepartment: "",
    subordinateDepartment: [],
    groupMembersIndexList: [],
    groupMembersItemArr: [],
  },
});

onMounted(async () => {
  store.organizationStore = await organizationStore.getInfo();
  console.log(store.organizationStore);
});
</script>

<template>
  <view>
    <view>
      <uv-cell-group>
        <uv-cell
          icon="thumb-up-fill"
          title="隶属部门"
          :value="store.organizationStore.rateDepartment"
        ></uv-cell>
        <uv-cell
          icon="tags-fill"
          title="下级部门"
          :value="store.organizationStore.subordinateDepartment.join('、')"
        ></uv-cell>
      </uv-cell-group>
    </view>

    <uv-index-list
      :index-list="store.organizationStore.groupMembersIndexList"
      customNavHeight="100rpx"
    >
      <template v-for="(item, index) in store.organizationStore.groupMembersItemArr">
        <!-- #ifdef APP-NVUE -->
        <uv-index-anchor :text="store.organizationStore.groupMembersIndexList[index]"></uv-index-anchor>
        <!-- #endif -->
        <uv-index-item>
          <!-- #ifndef APP-NVUE -->
          <uv-index-anchor :text="store.organizationStore.groupMembersIndexList[index]"></uv-index-anchor>
          <!-- #endif -->
          <uv-cell-group>
            <uv-cell
              icon="phone"
              :title="item.phone"
              :value="`${item.title}`"
            ></uv-cell>
          </uv-cell-group>
        </uv-index-item>
      </template>
    </uv-index-list>

    <app-bottom-bar :current="1" />
  </view>
</template>

<style lang="scss" scoped></style>
